<template>
  <div>
    <div
      class="container"
      style='padding-top: 10px'
    >
      <!-- 详情页返回按钮 -->
      <el-button
        v-if='isShowProjectInfo'
        type='warning'
        style='margin: 0 0 10px 20px; width: 100px'
        @click='handleBack'
      >返 回</el-button>
      <!-- 详情页得提交 -->
      <el-button
        v-if='isShowProjectInfo'
        type='warning'
        style='margin: 0 0 10px 20px; width: 100px'
        @click='handelDetail'
      >提交</el-button>
      <!-- 项目信息 -->

      <!-- 表格 -->
      <el-table
        v-if='isShowProjectInfo === false'
        :data="tableList.slice((currentPage-1)*pagesize,currentPage*pagesize)"
        border
        style='width: 100%; font-size: 15px'
      >
        <el-table-column
          prop='name'
          label='项目名称'
        ></el-table-column>
        <el-table-column
          prop='sqsj'
          label='申请时间'
        ></el-table-column>
        <el-table-column
          prop='statemc'
          label='状态'
        ></el-table-column>
        <el-table-column
          label='操作'
          align="center"
        >
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="success"
              icon="el-icon-view"
              @click="handleLook(scope.row, 'apply')"
            >查看</el-button>
            <el-button
              size="mini"
              type="warning"
              icon="el-icon-view"
              @click="handleEdit(scope.row, 'edit')"
            >编辑</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div v-else>
        <el-tabs
          tab-position="left"
          type="border-card"
          style='margin-bottom: 20px'
        >
          <el-tab-pane
            v-for='item in titleData'
            :key='item.sub'
            :label="item.name"
          >
            <!-- <keep-alive> -->
            <component
              :is='item.sub'
              :stateShow='true'
              :rowObj="row"
            ></component>
            <!-- </keep-alive> -->
          </el-tab-pane>
        </el-tabs>
      </div>
      <el-pagination
        v-if='!isShowProjectInfo'
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[5, 10, 15,]"
        :page-size="pagesize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="tableList.length"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
import Basic from '@/views/backStage/Tabs/components/Basic';
import Digest from '@/views/backStage/Tabs/components/Digest';
// import Institution from '@/views/backStage/Tabs/components/Institution';
import Datum from '@/views/backStage/Tabs/components/Datum';
import { changeStateAPI, getTabListDetailsAPI, getUserTabListAPI } from '@/api/backStage.js';
export default {
    props: {
        isShow: {
            type: Boolean,
            default: false
        }
    },
    name: 'applyForList',
    components: {
        Basic,
        Digest,
        // Institution,
        Datum
    },
    data() {
        return {
            currentPage: 1, //初始页
            pagesize: 10, // 每页的数据
            isShowProjectInfo: false,
            ProjectInfo: {}, // 项目信息,
            row: {},
            titleData: [
                { name: '基本信息', sub: 'Basic' },
                { name: '方案摘要', sub: 'Digest' },
                // { name: '机构信息', sub: 'Institution' },
                { name: '项目资料', sub: 'Datum' }
            ],
            tableList: []
        };
    },
    mounted() {
        this.getUserTabListData();
    },
    methods: {
        // 获取列表
        async getUserTabListData() {
            const res = await getUserTabListAPI({
                token: this.$store.state.user.token,
                oprid: this.$store.state.user.oprid
            });
            if (res.code == 'succ') {
                this.tableList = res.result;
            } else {
                this.$message.error(res.message);
            }
        },
        // 编辑
        handleEdit(row, text) {
            this.$emit('handleIsShow', row);
            this.$store.dispatch('applyFor/editFlag', text);
            this.$store.dispatch('applyFor/applyxmid', row.xmid);
        },
        // 点击查看
        async handleLook(row, flag) {
            this.row = row;
            this.$store.dispatch('applyFor/changeListFlag', flag);
            this.isShowProjectInfo = true;
            this.ProjectInfo = this.row;
            // 隐藏
            this.$emit('childByValue', false); // 控制父组件新增按钮是否显示
            const res = await getTabListDetailsAPI({ token: this.$store.state.user.token, xmid: row.xmid });
            if (res.code == 'succ') {
                this.$store.dispatch('applyFor/FunAaa', res.result[0]);
                this.showInfo = true; // 显示审核页
            } else {
                this.$message.error(res.message);
            }
        },
        handleBack() {
            this.isShowProjectInfo = false;
            // 显示
            this.$emit('childByValue', true); // 控制父组件新增按钮是否显示
            this.getUserTabListData();
        },
        async handelDetail() {
            if ((this.row.state = 0)) {
                const res = await changeStateAPI({
                    token: this.$store.state.user.token,
                    xmid: this.row.xmid,
                    xmzt: '1'
                });
                if (res.code == 'succ') {
                    this.$message.success('提交成功');
                } else {
                    this.$message.error(res.message);
                    // this.getUserTabListData();
                }
            } else {
                this.$message.warning('已经提交过');
            }
        },
        // 分页
        // 每页显示的条数
        handleSizeChange: function (size) {
            this.pagesize = size;
        },
        handleCurrentChange: function (currentPage) {
            this.currentPage = currentPage;
        }
    }
};
</script>

<style scoped>
</style>
